<template>
  <div class="project">
    <div class="clear bgc">
      <h3>项目名称：{{ project.p_title }}</h3>
      <ul class="project_mes">
        <li>指导老师：{{ project.t_name }}</li>
        <li>项目难度：{{ project.p_dif }}</li>
        <li>所需人数：{{ project.p_peopleNum }}</li>
        <li>项目周期：{{ project.p_time }}</li>
      </ul>
      <h3>项目简介：</h3>
      <p class="project_synopsis">{{ project.p_synopsis }}</p>
      <h3>项目要求：</h3>
      <p
        class="project_require"
        v-for="(require, i) in project.p_require"
        :key="i"
      >
        ({{ i + 1 }}){{ require }}
      </p>
       <div class="project_btn" v-if="project.p_type==11">
        <el-button type="success" @click="openLeaveWord(1)"  round>审核通过</el-button>
        <el-button type="danger" @click="openLeaveWord(0)" round>不予通过</el-button>
      </div>
    </div>
    <el-dialog title="写建议" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="">
          <el-input v-model="form.leaveWord" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelWriteLeaveWord">取 消</el-button>
        <el-button type="primary" @click="writeLeaveWord">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      u_id: "",
      loading: false,
      project: {},
      leaveWord: [],
      al_type:0,
      p_id: "",
      dialogFormVisible: false,
      form: {
        leaveWord: "",
      },
    };
  },
  mounted() {
    var token = localStorage.getItem("token");
    this.u_id = token.substring(1, token.length - 1).split("#")[1] * 1;
    this.p_id = this.$route.query.p_id;
    this.getProjectData();
  },
  methods: {
    getProjectData() {
      axios
        .post(`http://localhost:3000/expert/projectData`, { p_id: this.p_id })
        .then((ret) => {
          ret.data.projectData.p_require =
            ret.data.projectData.p_require.split("//");
          this.project = ret.data.projectData;
          this.leaveWord = ret.data.projectLeaveWord;
        });
    },
    cancelWriteLeaveWord() {
      this.dialogFormVisible = false;
      this.form.leaveWord = "";
    },
    openLeaveWord(id) {
      this.dialogFormVisible = true;
      this.al_type = id;
    },
    writeLeaveWord() {
      if (this.form.leaveWord == "") {
        this.$message({
          showClose: true,
          message: "留言不能为空！！",
          type: "error",
        });
      } else {
        var token = localStorage.getItem("token");
        var u_id = token.substring(1, token.length - 1).split("#")[1] * 1;
        var al_time = new Date().toLocaleString();
        axios
          .post(`http://localhost:3000/expert/applyMes`, {
            al_expert:u_id,
            al_project: this.p_id,
            al_teacher:this.project.t_id,
            al_student:this.project.s_id,
            al_main: this.form.leaveWord,
            al_type:this.al_type,
            al_time
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.$message({
                showClose: true,
                message: "审批成功！",
                type: "success",
              });
              this.cancelWriteLeaveWord();
            }
          });
      }
    },
  },
};
</script>

<style scoped>
.project {
  width: 90%;
  margin: 20px auto;
}
.project > div.bgc {
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 10px 20px;
  border-radius: 20px;
  border: 1px solid #ddd;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}
.project > div h3 {
  font: 18px/40px "";
  font-weight: 700;
  color: #303133;
}
.project_mes {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}
.project_mes > li {
  width: 50%;
  padding: 10px 20px;
  box-sizing: border-box;
}
.project_synopsis {
  padding: 10px 20px;
  text-indent: 2em;
  line-height: 26px;
}
.project_require {
  padding: 10px 20px;
  text-indent: 2em;
  line-height: 26px;
}
.project_btn {
  text-align: right;
  float: right;
}
.write_word {
  margin: 20px;
}
.write_word span {
  font-size: 18px;
  margin-right: 20px;
}
.write_word input {
  width: 600px;
  height: 38px;
  color: #606266;
  font: 18px/38px "";
  padding-left: 10px;
  margin-right: 20px;
  border: 1px solid #409eff;
  border-radius: 5px;
}
.mes_photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}
.mes_photo > span {
  font-weight: 700;
  color: #303133;
}
.mes_photo > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #409eff;
}
.mes_list {
  height: 91%;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 10px 20px;
  background-color: #fff;
}
.mes_list > li {
  display: flex;
  margin: 30px 0;
  justify-content: left;
}
.mes_main {
  width: 75%;
  color: #606266;
  padding-bottom: 30px;
  border-bottom: 1px solid #dcdfe6;
}
.mes_main > div {
  font-size: 12px;
  color: #909399;
}
.mes_main > div > span {
  margin: 0 10px;
  padding: 3px 10px;
  border-radius: 20px;
  color: white;
  background-color: #409eff;
}
.mes_main > div > span:last-of-type {
  background-color: #f56c6c;
}
.comment_me {
  width: 80%;
  margin-bottom: 20px;
  text-indent: 2em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.my_comment {
  width: 100px;
  height: 100%;
  font-size: 14px;
  color: #909399;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
